function Tab(el) {
    this.el = document.querySelector(el)
    this.init()
}
Tab.prototype.init = function () {
    this.titleOver()
    this.content(0)
}
Tab.prototype.titleOver = function () {
    let ulLi = this.el.querySelectorAll('ul li')
    ulLi.forEach((item, index) => {
        item.onmouseover = () => {
            ulLi.forEach((item2) => {
                item2.className = ''
            })
            ulLi[index].className = 'active'
            this.content(index)
            this.change()
        }
    })
}
Tab.prototype.content = function (index) {
    let olLi = this.el.querySelectorAll('ol li')
    olLi.forEach((item) => {
        item.className = ''
    })
    olLi[index].className = 'active'

}
Tab.prototype.change = function () {
    let lis = this.el.querySelectorAll('ol li')
    let imgs = this.el.querySelectorAll('ol li.active img')
    let head = document.querySelector('.head img')
    let cloth = document.querySelector('.cloth img')
    let dress = document.querySelector('.dress img')
    let socks = document.querySelector('.socks img')
    let shoes = document.querySelector('.shoes img')
    if (lis[0].className === 'active') {
        imgs.forEach(function (item, index) {
            item.onclick = function () {
                head.src = item.src
            }

        })
    }
    else if (lis[1].className === 'active') {
        imgs.forEach(function (item, index) {
            item.onclick = function () {
                console.log(1);
                cloth.src = item.src
            }

        })
    }
    else if (lis[2].className === 'active') {
        imgs.forEach(function (item, index) {
            item.onclick = function () {
                dress.src = item.src
            }

        })
    }
    else if (lis[3].className === 'active') {
        imgs.forEach(function (item, index) {
            item.onclick = function () {
                socks.src = item.src
            }

        })
    }
    else if (lis[4].className === 'active') {
        imgs.forEach(function (item, index) {
            item.onclick = function () {
                shoes.src = item.src
            }

        })
    }

}
